<template>
  <view class="container">
    <u-navbar
      :title="navtitle"
      leftIconColor="#ffffff"
      :autoBack="true"
      bgColor="#c30d23"
      :titleStyle="titleStyle"
      safeAreaInsetTop
      placeholder
    ></u-navbar>
    <view v-if="dataList.goodscode">
      <view class="echartsHeader">
        <view class="echartsHeaderLeft ccc">
          <view class="ehh" :class="dataList.last > presettle ? 'red' : 'green'">
            {{ formatNumber(dataList.last) }}
          </view>
          <view class="ehf">
            <text :class="Number(dataList.last) > presettle ? 'red' : 'green'">
              {{ formatNumber(Number(dataList.last) - dataList.presettle) + '%' }}
            </text>
            <text :class="Number(dataList.last) > presettle ? 'red' : 'green'">
              {{
                formatNumber(
                  ((Number(dataList.last) - dataList.presettle) / dataList.presettle) * 100
                ) + '%'
              }}
            </text>
          </view>
        </view>
        <view class="echartsHeaderRight">
          <view class="once c-between-center">
            <text>开盘</text>
            <text :class="dataList.opened > presettle ? 'red' : 'green'">
              {{ formatNumber(dataList.opened) }}
            </text>
          </view>
          <view class="once c-between-center">
            <text>最高</text>
            <text :class="dataList.highest > presettle ? 'red' : 'green'">
              {{ formatNumber(dataList.highest) }}
            </text>
          </view>
          <view class="once c-between-center">
            <text>涨停</text>
            <text :class="dataList.highest > presettle ? 'red' : 'green'">
              {{ formatNumber(dataList.zt) || '- - ' }}
            </text>
          </view>
          <view class="once c-between-center">
            <text>昨结</text>
            <text>{{ formatNumber(dataList.presettle) }}</text>
          </view>
          <view class="once c-between-center">
            <text>最低</text>
            <text :class="dataList.lowest > presettle ? 'red' : 'green'">
              {{ formatNumber(dataList.lowest) }}
            </text>
          </view>
          <view class="once c-between-center">
            <text>跌停</text>
            <text :class="dataList.lowest > presettle ? 'red' : 'green'">
              {{ formatNumber(dataList.dt) || '- -' }}
            </text>
          </view>
        </view>
      </view>
      <view class="hengshow" :style="{ paddingBottom: up ? '' : '20rpx' }">
        <view class="lineBox">
          <view class="leftLine"></view>
          <view class="center fcc">
            <u-icon v-if="!up" name="arrow-down" @click="up = !up"></u-icon>
            <u-icon v-if="up" name="arrow-up" @click="up = !up"></u-icon>
          </view>
          <view class="rightLine"></view>
        </view>
      </view>
      <view class="showView" v-show="up">
        <view class="svLeft">
          <view class="">
            <text>买量</text>
            <text>{{ dataList.bidvolume }}</text>
          </view>
          <view class="">
            <text>买价</text>
            <text :class="dataList.bid > presettle ? 'red' : 'green'">
              {{ formatNumber(dataList.bid) }}
            </text>
          </view>
          <view class="">
            <text>均价</text>
            <text :class="dataList.averageprice > presettle ? 'red' : 'green'">
              {{ formatNumber(dataList.averageprice) }}
            </text>
          </view>
          <view class="">
            <text>成交量</text>
            <text :class="dataList.bid > presettle ? 'red' : 'green'">
              {{ dataList.totalvolume }}
            </text>
          </view>
        </view>
        <view class="svRight">
          <view class="">
            <text>卖量</text>
            <text>{{ dataList.askvolume }}</text>
          </view>
          <view class="">
            <text>卖价</text>
            <text :class="dataList.ask > presettle ? 'red' : 'green'">
              {{ formatNumber(dataList.ask) }}
            </text>
          </view>
          <view class="">
            <text>振幅</text>
            <text>{{ zhenfu }}</text>
          </view>
          <view class="">
            <text>成交额</text>
            <text>{{ dataList.totalturnover }}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="bottlist">
      <u-row customStyle="margin-bottom: 10px">
        <u-col span="6">
          <view>
            <u-cell size="mini" title="卖挂牌">
              <view slot="title" style="font-size: 26rpx; color: gray">卖挂牌</view>
            </u-cell>
            <view class="buylisting">
              <view class="buy" v-for="(item, index) in sellist" :key="index">
                <view>{{ item.name }}</view>
                <view>{{ item.price }}</view>
                <view>{{ item.number }}</view>
              </view>
            </view>
          </view>
        </u-col>
        <u-col span="6">
          <view>
            <u-cell size="mini" title="买挂牌">
              <view slot="title" style="font-size: 26rpx; color: gray">买挂牌</view>
            </u-cell>
            <view class="buylisting">
              <view class="buy" v-for="(item, index) in buylist" :key="index">
                <view>{{ item.name }}</view>
                <view>{{ item.price }}</view>
                <view>{{ item.number }}</view>
              </view>
            </view>
          </view>
        </u-col>
      </u-row>
    </view>
    <view class="bottlist form">
      <u-form :model="formData" ref="uForm" labelWidth="100">
		  
        <u-form-item label="价格" prop="price" borderBottom>
			<view class="number-box flex-j-sb flex-a-c">
				<view class="num-btn decrease" @tap="minus(0)">
					<u-icon name="minus" color="#1989FA" size="17"></u-icon>
				</view>
				<input type="digit" class="num-ipt" :value="formData.price" @input="changePrice">
				<view class="num-btn" @tap="plus(0)">
					<u-icon name="plus" color="#fff" size="17"></u-icon>
				</view>
			</view>
        </u-form-item>
        <u-form-item label="数量" prop="number" borderBottom>
			<view class="number-box flex-j-sb flex-a-c">
				<view class="num-btn decrease" @tap="minus(1)">
					<u-icon name="minus" color="#1989FA" size="18"></u-icon>
				</view>
				<input type="digit" class="num-ipt" :value="formData.number" @input="changeNumber">
				<view class="num-btn" @tap="plus(1)">
					<u-icon name="plus" color="#fff" size="18"></u-icon>
				</view>
			</view>
          <view class="number-btns">
            <view
              class="btn-item"
              :class="numberActive === index ? 'btn-item-active' : ''"
              v-for="(item, index) in numbers"
              :key="index"
              @click="numberClick(index)"
            >
              {{ item }}
            </view>
          </view>
        </u-form-item>
        <u-form-item label="预估可订立量" prop="estimateCount" borderBottom>
          <view>{{ formData.estimateCount }}</view>
        </u-form-item>
        <u-form-item label="预扣保证金" prop="deposit" borderBottom>
          <view>{{ formData.deposit }}</view>
        </u-form-item>
        <u-form-item label="可用资金" prop="deposit" borderBottom>
          <view>{{ formData.available }}</view>
        </u-form-item>
      </u-form>
    </view>
	
    <view class="bottom">
      <u-button color="#D82D42" @click="submit(0)">订立{{type?'卖出':'买入'}}</u-button>
      <u-button color="#1E78B9" disabled @click="submit(1)">转让{{type?'卖出':'买入'}}</u-button>
    </view>
  </view>
</template>

<script>
import { orderUrl, goodsPrice,queryQuoteDay } from '@/api/user.js';
import { createOrder } from '@/api/order.js';
import { getUserCapital,getUserInfo } from '@/api/home.js';
export default {
	name:'Buy',
  data() {
    return {
      up: false,
      navtitle: '',
      titleStyle: {
        color: '#ffffff',
        fontSize: '36rpx',
        fontWeight: '400'
      },
      dataList: {},
      sellist: [],
      buylist: [],
      formData: {
        price: 0,
        number: 1,
        estimateCount: 0,
        deposit: 0,
        available: 0 // 可用资金
      },
      numbers: [1, 5, 10, 20, 30, 50],
      numberActive: 0,
      type: 0, // 方向 0 买入 1 卖出
    };
  },
  onLoad(e) {
    this.navtitle = e.name;
    this.type = Number(e.type);
    this.getorderUrl();
    // this.getOrderList();
	this.queryQuoteDay();
    
  },
  methods: {
	  submit(i){ // 0 订立  1 转让
		 uni.showModal({
			 title:'确定要提交吗？',
		 	content:'*若存在价格匹配的反方向委托订单，系统将会自动撤销',
			complete: async (result) => {
				if(result.confirm) {
					const res = await createOrder({
						goodsCode:this.dataList.goodscode,
						goodsName:this.navtitle.split('/')[1],
						direction:this.type,
						type:i,
						price:this.formData.price,
						num:this.formData.number,
					})
					uni.$showToast(res.msg,5000)
				}
			}
		 }) 
	  },
	  changePrice({detail}){
		this.formData.price = detail.value
		this.getDeposit();
	  },
	  changeNumber({detail}){
		this.formData.number = detail.value
		this.getDeposit();
	  },
	  minus(type){ // 0 为转让价格 1 为转让数量
	  	if(type === 0) {
	  		if(this.formData.price <= 0) return 
	  		this.formData.price = (+this.formData.price - 0.01).toFixed(2)
	  	} else {
	  		if(this.formData.number <= 0) return 
	  		this.formData.number -= 1
	  	}
		this.getDeposit();
	  },
	  plus(type){ // 0 为转让价格 1 为转让数量
	  	if(type === 0) {
	  		if(this.formData.price <= 0) return this.formData.price = 0.01
	  		this.formData.price = (+this.formData.price + 0.01).toFixed(2)
	  	} else {
	  		if(this.formData.number <= 0) return this.formData.number = 1
	  		this.formData.number += 1
	  	}
		this.getDeposit();
	  },
	  async getInfo(){
	  	const res = await getUserInfo()
	  	if(res.data.user) {
	  		this.$store.commit('setUserInfo',res.data.user)
	  		this.getCapital(res.data.user.userName)
	  	}
	  },
	  async getCapital(name){ // 获取资金
	  	const res = await getUserCapital({
	  		userName:name,
	  	})
	  	if(res.rows && res.rows.length) {
	  		this.formData.available = res.rows[0].availableBalance
	  		this.formData.estimateCount = Math.floor(this.formData.available / this.formData.price)
	  	}
	  },
    numberClick(index) {
      this.formData.number = this.numbers[index];
      this.numberActive = index;
      this.getDeposit();
    },
    getDeposit() {
      this.formData.deposit = (this.formData.price * this.formData.number).toFixed(2);
	  this.formData.estimateCount = Math.floor(this.formData.available / this.formData.price)
    },
    getorderUrl() {
      orderUrl().then(res => {
		  // console.log(res);
		   if (res.data && res.data.length) {
				this.dataList = res.data[0];
				this.formData.price = +this.dataList.last;
				this.presettle = +this.dataList.presettle;
				this.zhenfu =
				  this.formatNumber(
					((Number(this.dataList.last) - Number(this.dataList.presettle)) /
					  Number(this.dataList.presettle)) *
					  100
				  ) + '%';
				this.getDeposit();
				this.getInfo(); // 调取可用资金
			}
	   
      });
    },
    formatNumber(number) {
      if (number) {
        // 使用 toFixed 保留两位小数
        return parseFloat(number).toFixed(2);
      } else {
        return false;
      }
    },
    getOrderList() {
      goodsPrice().then(res => {})
    },
	queryQuoteDay() {
	  queryQuoteDay().then(res => {
		  // console.log(22222,res);
		  // 买卖挂牌
		    if (res.data && res.data.length > 0) {
		      const item = res.data[0];
		      this.sellist = [
		        { name: '卖一', price: item.ask, number: item.askvolume },
		        { name: '卖二', price: item.ask2, number: item.askvolume2 },
		        { name: '卖三', price: item.ask3, number: item.askvolume3 }
		      ];
		      this.buylist = [
		        { name: '买一', price: item.bid, number: item.bidvolume },
		        { name: '买二', price: item.bid2, number: item.bidvolume2 },
		        { name: '买三', price: item.bid3, number: item.bidvolume3 }
		      ];
		    }
	  });
	},
  }
};
</script>

<style lang="scss" scoped>
	.red {
		color: #E20000 !important;
	}
	.green {
		color: #0baf1f !important;
	}
.container {
  padding-bottom: 80rpx;
}
.echartsHeader {
  width: 100%;
  height: 230rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;

  .echartsHeaderLeft {
    width: 35%;
    height: 100%;

    // background: green;
    .ehh {
      font-size: 56rpx;
      font-weight: bold;
    }

    .ehf {
      font-size: 36rpx;
      width: 100%;
      box-sizing: border-box;
      padding: 0 20rpx;
      margin-top: 20rpx;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
  }

  .echartsHeaderRight {
    width: 65%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;

    .once {
      width: 30%;

      text:first-child {
        color: #999999;
      }

      text:last-child {
        font-size: 32rpx;
      }
    }

    // background: red;
  }
}

.hengshow {
  padding: 0 20rpx;
  box-sizing: border-box;
  background: #fff;
}

.showView {
  width: 100%;
  height: 320rpx;
  // background: #c30d23;
  display: flex;
  background: #fff;

  .svLeft,
  .svRight {
    width: 50%;
    height: 100%;
    box-sizing: border-box;
    padding: 10rpx 20rpx;

    view {
      width: 100%;
      height: 25%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      text:first-child {
        color: #999999;
      }
    }
  }
}
.lineBox {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .leftLine,
  .rightLine {
    width: 45%;
    height: 1rpx;
    background: #999999;
  }
}

.number-box {
	width: 100%;
	.num-btn {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		background-color: #1989FA;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.decrease {
		border: 1rpx solid #1989FA;
		background-color: transparent;
	}
	.num-ipt {
		text-align: center;
		flex: 1;
	}
	
}


.bottlist {
  margin-top: 20rpx;
  background-color: #fff;

  .buy {
    display: flex;
    justify-content: space-around;
    color: #333;
    line-height: 63rpx;
    height: 63rpx;
    font-size: 25rpx;

    :nth-child(2) {
      color: #f33;
    }
  }
}
.form {
  margin: 20rpx;
  padding:0px 20rpx;
  border-radius: 5px;
  /deep/ {
    .u-form-item__body__right__content__slot {
      display: block;
    }
    .u-form-item__body__left,
    .u-form-item__body__left__content {
      align-items: baseline;
      line-height: 60rpx;
    }
  }
  .number-btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    .btn-item {
      width: 130rpx;
      height: 44rpx;
      line-height: 44rpx;
      margin-left: 20rpx;
      margin-top: 20rpx;
      border: 1px solid #e5e5e5;
      border-radius: 8rpx;
      text-align: center;
      &:nth-child(3n + 1) {
        margin-left: 0;
      }
      &-active {
        border: 1px solid #3c9cff;
        color: #3c9cff;
      }
    }
  }
}
.bottom {
  position: fixed;
  display: flex;
  bottom: 0;
  left: 0;
  right: 0;
  /deep/.u-button {
    border-radius: 0;
  }
}
/deep/.u-cell__body {
  padding: 10rpx 30rpx;
}
.minus {
  width: 22px;
  height: 22px;
  border-width: 1px;
  border-color: #2979ff;
  border-style: solid;
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
  border-bottom-left-radius: 100px;
  border-bottom-right-radius: 100px;
  @include flex;
  justify-content: center;
  align-items: center;
}
.plus {
  width: 22px;
  height: 22px;
  background-color: #2979ff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
